<script setup>
import {ref} from "vue";
import {post} from "@/request/request";
import {onShow} from "@dcloudio/uni-app";

const userInfos = ref({});
const goodsInfos = ref({});


onShow(() => {
  userInfo();
  goodsInfo();
});

const userInfo = () => {
  post("userInfo").then((res) => {
    const {data} = res;
    console.log(data);
    userInfos.value = data;
  });
};

const goodsInfo = () => {
  post('productOrder').then(res => {
    const {data} = res;
    console.log('productOrder', data);
    goodsInfos.value = data;
  });
};


const backClick = () => {
  uni.navigateBack();
};
const expressClick = (item) => {
  const {shipping_number} = item;
  if (shipping_number) { // 检查shipping_number是否存在
    uni.navigateTo({
      url: "plugin://kdPlugin/index?num=" + shipping_number + "&appName=化妆品",
    });
  } else {
    uni.showToast({
      title: 'يوق',
      icon: 'error',
      duration: 2000
    });
  }
}
//分享
const onShareAppMessage = (res) => {
  if (res.from === "button") {
  }
  return {
    title: "ئەڭ ئىسىل مەھسۇلات بىزدە",
    path: "/pages/home/home",
  };
};

</script>
<template>
  <uv-navbar :fixed="true" :placeholder="true" title="بارلىق زاكاس" @leftClick="backClick">
    <template v-slot:left>
      <view class="uv-nav-slot" @click="open">
        <image :src="userInfos && userInfos.u_avatar ? userInfos.u_avatar : '/static/avatar.svg'"/>
      </view>
    </template>
  </uv-navbar>
  <template v-if="goodsInfos.length > 0">
    <view class="order" v-for="(item, index) in goodsInfos" :key="index">
      <view class="order-box">
        <view class="order-box-top">
          <view class="top-time">
            <view class="time">{{ item.purchase_date }}</view>
            <view style="font-size: 25rpx;flex: 1">{{ item.shipping_number }}</view>
            <view class="pay-st">{{ item.purchase_status }}</view>
          </view>

          <view class="top-item">
            <image :src="item.product_image"/>
            <view class="item-content">
              <view style="font-size: 24rpx;color: #111111">{{ item.product_name }}</view>
              <view style="display: flex;align-items: center;justify-content: center">
                <template v-for="(dosage, index) in item.recommended_dosag" :key="index">
                  <view style="color: #444444;width: 378rpx;font-size: 24rpx">{{ dosage }}</view>
                </template>
              </view>
              <view style="display: flex;">
                <view style="font-size: 28rpx;color: #FF9385">{{ item.total_price }}￥</view>
                <view style="margin-right: 100rpx;font-size: 20rpx;color: #333333;margin-top: 10rpx">
                  x{{ item.purchase_quantity }}
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="order-box-bottom">
          <view style="flex: 1">
            <button class="btn" @click="expressClick(item)">زاكاس ئۇچۇرىنى كۆرۈش</button>
          </view>
          <view class="bottom-price"> جەمئي مال سانى {{ item.purchase_quantity }} جەمئي پۇلى {{
              item.total_price
            }}
          </view>
        </view>
      </view>
    </view>
  </template>
  <template v-else>
    <image src="/static/404.svg"/>
    <view style="width: 100%;text-align: center">زاكاس ئۇچۇرى يوق</view>
  </template>
</template>

<style scoped lang="scss">
@mixin flex($direction: row) {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: $direction;
}

.uv-nav-slot {
  @include flex;
  align-items: center;
  justify-content: space-between;
  border-width: 1rpx;
  border-radius: 200rpx;
  border-color: #dadbde;
  padding: 6rpx 14rpx;
  opacity: 0.8;

  image {
    width: 60rpx;
    height: 60rpx;
    border-radius: 9999rpx;
  }
}

.order {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20rpx;
  padding-bottom: env(safe-area-inset-bottom);

  .order-box {
    width: 692rpx;
    border-radius: 20rpx;
    overflow: hidden;
    box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);

    .order-box-top {
      width: 100%;
      height: 284rpx;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      flex-direction: column;

      .top-time {
        width: 100%;
        display: flex;
        align-items: center;

        .time {
          flex: 1;
          margin-right: 57rpx;
          font-size: 24rpx;
          color: #111111;
        }

        .pay-st {
          flex: 1;
          font-size: 24rpx;
          color: #91C788;
          margin-left: -130rpx;
        }
      }

      .top-item {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;

        image {
          width: 136rpx;
          height: 136rpx;
        }

        .item-content {
          width: 378rpx;
          height: 100%;
          display: flex;
          justify-content: space-around;
          flex-direction: column;
        }
      }
    }

    .order-box-bottom {
      height: 100rpx;
      width: 100%;
      background: #91C788;
      display: flex;
      align-items: center;

      .btn {
        margin: 30rpx;
        height: 52rpx;
        width: 206rpx;
        background: #FFFFFF;
        font-size: 18rpx;
        color: #111111;
        border-radius: 20rpx;
      }

      .bottom-price {
        flex: 1;
        width: 252rpx;
        color: #FFFFFF;
        font-size: 20rpx;
      }
    }
  }
}

button::after {
  border: none;
}
</style>
